<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody mt-40">
        <el-form label-width="100px" ref="editForm" :rules="editFormRules" :model="editForm">
          <el-form-item label="年段" prop="section_id">
            <el-select v-model="editForm.section_id" placeholder="请选择年段" class="w-200">
              <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级名称" prop="class_name">
            <el-input auto-complete="off" placeholder="班级名称" class="w-200" v-model="editForm.class_name"></el-input>
          </el-form-item>
<!--          <el-form-item label="区域位置" prop="class_name">-->
<!--            <el-button size="small" @click="dialogVisible=true">选择班级所在地图位置</el-button>-->
<!--            <p v-if="editForm.map">坐标：{{editForm.map.clickPoint[0]+','+editForm.map.clickPoint[1]}}</p>-->
<!--          </el-form-item>-->
          <el-form-item label="">
            <el-button type="primary" size="small" @click="submitForm('editForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
        title="选择位置"
        :visible.sync="dialogVisible"
        width="80%">
      <div style="max-height: 500px;overflow-y: auto;">
        <mapBox @getMapData="getMapData" v-if="dialogVisible" routerLine="class"></mapBox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="checkMapData()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import mapBox from '../3dmap/navigate/index.vue'

export default {
  components: {
    mapBox
  },
  data () {
    return {
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        section_id: '',
        class_name: '',
        user_id: '',
        map: ''
      }, // 编辑界面数据
      editFormRules: {
        section_id: [
          {required: true, message: '请选择年段', trigger: 'blur'}
        ],
        class_name: [
          {required: true, message: '请填写班级名称', trigger: 'blur'}
        ]
      }, // 表单验证不能为空规则
      sectionList: [],
      editId: this.$route.query.editId,
      dialogVisible: false
    }
  },
  created () {
    this.admin_section_index()
  },
  methods: {
    InitFn () {
      this.$fetch(this.api.admin_classes_edit, {
        id: this.editId
      }).then((response) => {
        if (response.code === 0) {
          this.editForm.section_id = response.vo.section_ids
          this.editForm.class_name = response.vo.class_name
          this.editForm.map = JSON.parse(response.vo.map)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    admin_section_index () {
      this.$post(this.api.admin_section_index, {
        p: this.page.pageindex
      }).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
          this.page.total = response.list.total
          if (this.editId) {
            this.InitFn()
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSelectionChange (val) {
      this.handleSelection = val
    },
    backlist () {
      this.$router.go(-1)
    },
    submitForm (formName) {
      let that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.submitFormAdd()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitFormAdd () {
      let url_ = this.api.admin_classes_add
      if (this.editId) {
        url_ = this.api.admin_classes_edit
        this.editForm.id = this.editId
      }
      this.editForm.map = JSON.stringify(this.editForm.map)
      this.$post(url_, this.editForm).then((response) => {
        if (response.code === 0) {
          if (!this.editId) {
            this.$refs.editForm.resetFields()
          }
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getMapData (option) {
      console.log('option获取到的map坐标:', option)
      this.editForm.map = option
    },
    checkMapData () {
      if (!this.editForm.map) {
        this.$message.error('请选择所在地图位置')
      } else {
        this.dialogVisible = false
      }
    }
  },
  mounted () {
  }
}
</script>


